import React, { Component } from 'react';

import '../styles/Login.scss'

import { user_login } from "../api/index";

import { CloseOutline } from 'antd-mobile-icons'

import { Grid, Form, Button, Input, Toast } from 'antd-mobile'

class Login extends Component {
  async denglu() {
    var res = await this.refs.fromRef.getFieldValue()
    var res2 = await user_login()
    var i = res2.data.findIndex((item) => {
      return (item.phone == res.phone && item.pass == res.pass)
    })
    if (i == -1) {
      console.log("密码或账号不正确");
    }
    else {
      Toast.show({
        icon: 'success',
        content: '登录成功',
      })
      // console.log(res2.data);
      var res3 = res2.data.find((item) => {
        return item.phone == res.phone
      })
      // console.log(res3);
      window.localStorage.setItem('use', JSON.stringify(res3))
      this.props.history.push('/')
    }
  }
  go() {
    this.props.history.push('/register')
  }
  gohome() {
    // this.props.history.push('/')
    Toast.show({
      content: '为了更好的体验，还是登录一下吧'
    })
  }
  back() {
    // this.props.history.go(-1)
    Toast.show({
      content: '请登录'
    })
  }
  render() {
    return (
      <div className='login'>
        <div className="top">
          <Grid columns={3} gap={8}>
            <Grid.Item>
              <div className='item' onClick={() => { this.back() }}><CloseOutline fontSize={16} /></div>
            </Grid.Item>
            <Grid.Item>
              <div className='item2'>手机登录</div>
            </Grid.Item>
            <Grid.Item>
              <div className='item3' onClick={() => { this.gohome() }}>随便看看</div>
            </Grid.Item>
          </Grid>
        </div>
        <div className="main">
          <div className="title">
            欢迎登陆优优
          </div>
          <Form
            ref="fromRef"
            onFinish={() => { this.denglu() }}
            layout='horizontal'
            footer={
              <Button block type='submit' style={{ height: '35px' }} color='primary' size='mini'>
                登录
              </Button>
            }
          >
            <Form.Item
              style={{ paddingLeft: 0 }}
              name='phone'
              rules={[{ required: true, message: '账号不能为空' }]}
            >
              <Input placeholder='请输入账号' />
            </Form.Item>
            <Form.Item

              style={{ paddingLeft: 0 }}
              name='pass'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input placeholder='请输入密码' type='password' />
            </Form.Item>
          </Form>
          <div className="go" onClick={() => { this.go() }}>
            去注册账号
          </div>
        </div>
      </div>
    );
  }
}

export default Login;